/**
 * 点移动到点
 */

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var speed = 0;
var p = null;
var p2 = null;
var moves = null, xunits = null, yunits = null, ball = null;
function Point(x, y){
    this.x = x;
    this.y = y;
}

function draw(){
    context.fillStyle = '#ffffff';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);

    if (moves > 0) {
        moves --;
        ball.x += xunits;
        ball.y += yunits;
    }

    context.beginPath();
    p.x += speed.x;
    p.y += speed.y;
    context.arc(ball.x, ball.y, 20, 0, 2* Math.PI);
    context.stroke();
    context.closePath();
}

(function(){
    speed = 5;
    p = new Point(20, 250);
    p2 = new Point(400, 350);

    var dx = p2.x - p.x;
    var dy = p2.y - p.x;

    var distance = Math.sqrt(dx * dx + dy * dy);
    moves = distance / speed;
    xunits = (p2.x -p.x) / moves;
    yunits = (p2.y - p.y) / moves;
    ball = new Point(p.x, p.y);

    window.setInterval("draw()", 1000);
})();
